<template>
	<page-meta :page-style="popupShow ? 'overflow: hidden;' : ''" />
	<view>
		<view class="general-entry-container" v-if="hasAuth">
			<view class="upload-container">
				<view class="upload-item">
					<view class="upload-item-left">
						<view class="upload-item-title">扫描头像面</view>
						<view class="upload-item-des">上传身份证头像面</view>
					</view>
					<view class="upload-item-right" v-if="!showPicPath.frontPhoto">
						<image :src="frontImg" class="upload-img" @tap="chooseImg" data-type="identityFrontPhoto" />
					</view>
					<view class="upload-item-right" v-else>
						<image :src="showPicPath.frontPhoto" class="upload-img" @tap="chooseImg" data-type="identityFrontPhoto" />
						<image :src="delImg" class="del-img" @tap="delImgFun" data-type="identityFrontPhoto" />
					</view>
				</view>
				<view class="upload-item">
					<view class="upload-item-left">
						<view class="upload-item-title">扫描国徽面</view>
						<view class="upload-item-des">上传身份证国徽面</view>
					</view>
					<view class="upload-item-right" v-if="!showPicPath.backPhoto">
						<image :src="backImg" class="upload-img" @tap="chooseImg" data-type="identityBackPhoto" />
					</view>
					<view class="upload-item-right" v-else>
						<image :src="showPicPath.backPhoto" class="upload-img" @tap="chooseImg" data-type="identityBackPhoto" />
						<image :src="delImg" class="del-img" @tap="delImgFun" data-type="identityBackPhoto" />
					</view>
				</view>
				<view class="upload-item">
					<view class="upload-item-left">
						<view class="upload-item-title">拍摄人脸近照</view>
						<view class="upload-item-des">用于进出场人脸识别</view>
					</view>
					<view class="upload-item-right face-img" v-if="!showPicPath.avatarPhoto" @tap="chooseImg" data-type="avatar">
						<image :src="faceImg" class="upload-img" />
						<image :src="photoImg" class="photo-img" />
					</view>
					<view class="upload-item-right face-img" v-else>
						<image :src="showPicPath.avatarPhoto" class="upload-img" @tap="chooseImg" data-type="avatar" />
						<image :src="delImg" class="del-img" @tap="delImgFun" data-type="avatar" />
					</view>
				</view>
			</view>
			<view class="common-btns-container">
				<view class="common-btn-container" @tap="distinguish" hover-class="common-btn">下一步</view>
			</view>
		</view>

		<!-- 重点管控人员提示 -->
		<!-- <u-popup :show="popupShow" @close="onClose" position="bottom" custom-style="height: 50%;" round>
			<view class="popup-container">
				<view class="popup-title">重点管控人员提示</view>
				<view class="abnormal-personnel-tips">
					<icon type="icon-tishi" :size="32" />
					<text class="abnormal-tips-content">{{ abnormalPersonnelName }}属于重点管控人员名单人员</text>
				</view>
				<scroll-view class="popup-scroll" scroll-y>
					<view class="abnormal-personnel-list">
						<view class="abnormal-personnel-item" v-for="(item, index) in abnormalPersonnelRecords" :key="index">
							<view class="project-name">{{ item.projectName }}</view>

							<view class="abnormal-reason">{{ item.recordTimeData }}，{{ item.reason }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="common-btns-container">
					<view class="common-btn-container" @tap="sureEnter" hover-class="common-btn">继续录入</view>
					<view class="common-btn-container general" @tap="onClose" hover-class="common-btn">放弃录入</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
import { OBSupload } from '@/pagesA/utils/upload.js';
import { common } from '@/pagesA/utils/common.js';
// import frontImg from '@/pagesA/assets/image/front.png';
// import backImg from '@/pagesA/assets/image/back.png';
// import photoImg from '@/pagesA/assets/image/photo.png';
// import faceImg from '@/pagesA/assets/image/face.png';
// import delImg from '@/pagesA/assets/image/del.png';
import moment from 'moment';
export default {
	data() {
		return {
			frontImg: common.imgs.frontImg,
			backImg: common.imgs.backImg,
			photoImg: common.imgs.photoImg,
			faceImg: common.imgs.faceImg,
			delImg: common.imgs.delImg,
			showPicPath: {
				frontPhoto: '',
				backPhoto: '',
				avatarPhoto: ''
			},
			uploadFilePath: {
				identityFrontPhoto: '',
				identityBackPhoto: '',
				avatar: ''
			},
			upLoading: false,
			hasAuth: true,
			popupShow: false,
			abnormalPersonnelRecords: [],
			abnormalPersonnelName: '',
			personInfo: {},
			isAllRight: false
		};
	},
	onLoad(options) {
		// this.setData({
		// 	hasAuth: app.globalData.commonMethods.hiddenAuth(app)
		// });
	},
	onShow() {
		if (!uni.getStorageSync('cisdiHwConfig')) {
			common.commonMethods.getOBSConfig();
		}
	},
	methods: {
		checkUpLoadPath() {
			if (this.uploadFilePath.identityFrontPhoto && this.uploadFilePath.identityBackPhoto && this.uploadFilePath.avatar) {
				//自动识别
				this.distinguish();
			} else {
				this.isAllRight = false;
			}
		},
		setTypeData(type, data, isUpload = 'true') {
			switch (type) {
				case 'identityFrontPhoto':
					if (isUpload) {
						OBSupload(data, (res) => {
							this.showPicPath.frontPhoto = data;
							this.uploadFilePath.identityFrontPhoto = res.url;
							this.upLoading = false;
						});
					} else {
						this.showPicPath.frontPhoto = data;
						this.uploadFilePath.identityFrontPhoto = data;
					}
					break;
				case 'identityBackPhoto':
					if (isUpload) {
						OBSupload(data, (res) => {
							this.showPicPath.backPhoto = data;
							this.uploadFilePath.identityBackPhoto = res.url;
							this.upLoading = false;
						});
					} else {
						this.showPicPath.backPhoto = data;
						this.uploadFilePath.identityBackPhoto = data;
					}
					break;
				case 'avatar':
					if (isUpload) {
						OBSupload(data, (res) => {
							console.log(res);
							this.showPicPath.avatarPhoto = data;
							this.uploadFilePath.avatar = res.url;
							this.upLoading = false;
						});
					} else {
						this.showPicPath.avatarPhoto = data;
						this.uploadFilePath.avatar = data;
					}
					break;
			}
		},

		chooseImg(e) {
			if (this.upLoading) {
				return;
			}
			this.upLoading = true;
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				camera: e.currentTarget.dataset.type != 'avatar' ? 'back' : 'front',
				success: (res) => {
					console.log(res);
					this.setTypeData(e.currentTarget.dataset.type, res.tempFiles[0].tempFilePath);
				},
				fail: () => {
					this.upLoading = false;
				}
			});
		},
		delImgFun(e) {
			this.setTypeData(e.currentTarget.dataset.type, '', false);
		},
		distinguish() {
			//身份证识别
			if (!this.uploadFilePath.identityFrontPhoto) {
				common.message.toast('请上传头像面');
				return;
			}
			if (!this.uploadFilePath.identityBackPhoto) {
				common.message.toast('请上传国徽面');
				return;
			}
			if (!this.uploadFilePath.avatar) {
				common.message.toast('请上传人脸近照');
				return;
			}
			uni.showLoading({
				title: '识别中',
				mask: true
			});
			common.apis.roster
				.distinguish({
					identityFrontPhoto: this.uploadFilePath.identityFrontPhoto,
					identityBackPhoto: this.uploadFilePath.identityBackPhoto,
					avatar: this.uploadFilePath.avatar
				})
				.then((res) => {
					if (!res.data) {
						return;
					}
					this.personInfo = res.data;
					if (res.data.isAbnormalPersonnel) {
						//重点管控人员
						let abnormalPersonnelRecords = res.data.abnormalPersonnelRecords || [];
						let abnormalPersonnelName = '';
						for (let item of abnormalPersonnelRecords) {
							item.recordTimeData = moment(item.recordTime).format('YYYY/MM/DD');
							abnormalPersonnelName = item.name;
						}
						this.popupShow = true;
						this.abnormalPersonnelRecords = abnormalPersonnelRecords;
						this.abnormalPersonnelName = abnormalPersonnelName;
					} else {
						this.sureEnter();
					}
					uni.hideLoading();
				});
		},

		onClose() {
			this.popupShow = false;
		},
		sureEnter() {
			//确定录入
			uni.setStorageSync('hasDistinguishInfo', true);
			uni.setStorageSync('distinguishInfo', this.personInfo);
			this.onClose();
			uni.navigateTo({
				url: '/pagesA/pages/roster/register/comfirmInfo/comfirmInfo'
			});
		}
	}
};
</script>
<style>
@import url('@/pagesA/assets/style/common.css');
.general-entry-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.upload-container {
	flex: 1;
	height: 0;
	padding: 32rpx;
	background-color: #fff;
}

.upload-item {
	display: flex;
	background: #f5f6f9;
	border-radius: 8rpx;
	margin-bottom: 32rpx;
}

.upload-item:last-child {
	margin-bottom: 0;
}

.upload-item-left {
	flex: 1;
	margin-top: 24rpx;
	margin-left: 32rpx;
}

.upload-item-title {
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
}

.upload-item-des {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
	line-height: 32px;
}

.upload-item-right {
	width: 264rpx;
	height: 184rpx;
	margin: 12rpx 32rpx 18rpx;
	position: relative;
}

.face-img {
	height: 304rpx;
}

.upload-img {
	width: 100%;
	height: 100%;
}

.photo-img {
	width: 72rpx;
	height: 72rpx;
	position: absolute;
	left: 50%;
	bottom: 36rpx;
	transform: translateX(-50%);
}

.del-img {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	top: -16rpx;
	right: -16rpx;
}

/* 重点管控人员弹框样式 */
.popup-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.popup-title {
	background-color: #f4f6f9;
	height: 96rpx;
	line-height: 96rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #353b4e;
	padding-left: 32rpx;
}

.abnormal-personnel-tips {
	display: flex;
	align-items: center;
	padding-left: 32rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #353b4e;
	margin: 24px 0;
}

.abnormal-personnel-tips .abnormal-tips-content {
	margin-left: 16rpx;
}

.popup-scroll {
	flex: 1;
	height: 0;
	box-sizing: border-box;
	padding: 0 24px;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #747e99;
}

.abnormal-personnel-list {
	padding-bottom: 32rpx;
}

.abnormal-personnel-item {
	margin-bottom: 32rpx;
}

.abnormal-personnel-item .project-name,
.abnormal-personnel-item .abnormal-reason {
	word-break: break-all;
}

.general {
	background: #ff555c;
}
</style>
